<jsp:include page="../template/top.jsp"></jsp:include>
	
	<form id="form" action="${pageContext.request.contextPath}/despesa/lancar" method="post"> 
		<div class="interfaceExterna">
			<h3><a href="#">Despesa</a></h3>
			<div>
				<div class="campo">
					<label>Data</label> 
					<input type="text" id="data" class="datepicker" value="<fmt:formatDate value='${despesa.data}' pattern='dd/MM/yyyy' />" name="despesa.data" />
			  </div>
				<div class="campo">
					<label>Apartamento</label> 
					<select id="apartamento" name="despesa.reserva.apartamento.numero">
					<option value="0">- Selecione -</option>
					<c:forEach var="apartamento" items="${apartamentos}">
						<option value="${apartamento.numero}">${apartamento.numero}</option>
					</c:forEach>
				</select>
			  </div>
				<div class="campo">
					<label>Servi&ccedil;o</label> 
					<select id="servico" name="despesa.servico.id">
					<option value="0">- Selecione -</option>
					<c:forEach var="servico" items="${servicos}">
						<option value="${servico.id}">${servico.descricao}</option>
					</c:forEach>
				</select>
			  </div>
				<div class="campo">
					<label>Quantidade</label> 
					<input alt="999" type="text" id="quantidade" value="${despesa.quantidade}" name="despesa.quantidade" />
			  </div>
			</div>
		</div>
		
		<br clear="all" />
	
		<div class="botoes">
			<input type="submit" id="botaoNovo" value="Lan&ccedil;ar despesa" />
		</div>
	</form>
	
	<br clear="all" />

	<div class="interfaceExterna">
		<h3><a href="#">Despesas j&aacute; lan&ccedil;adas para o apartamento</a></h3>
		<div class="grid">
			<table id="despesas">
				<thead>
					<tr>
						<th></th>
						<th>Data</th>
						<th>Servi&ccedil;o</th>
						<th>Quantidade</th>
						<th style="width:120px;">Valor Unit&aacute;rio</th>
						<th style="width:120px;">Total</th>
					</tr>
				</thead>
				<tbody>
						<tr>
							<td colspan="5">Selecione um apartamento!</td>
						</tr>
				</tbody>
			</table>
		</div>
	</div>
<jsp:include page="../template/bottom.jsp"></jsp:include>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/date.format.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	var trSemApartamento;
	function carregaDespesas() {
		$.ajax({
			url: '${pageContext.request.contextPath}/despesa/lista/' + $('#apartamento').val(),
			dataType: 'json',
			cache: false,
			success: function(data) {
				var total = 0;
				if(!trSemApartamento) {
					trSemApartamento = $('#despesas > tbody > tr').remove();	
				}
				
				$('#despesas > tbody > tr').remove();
				$.each(data, function(i,item){
					var totalDespesa = item.quantidade * parseFloat(item.servico.valor);
					total += totalDespesa;
					$('#despesas > tbody').append('<tr>');
					$('<span class="ui-icon ui-icon-trash" />')
						.appendTo($('<button class="ui-state-default ui-corner-all">').click(function () {
							if (confirm('Deseja mesmo estornar a despesa?')) {
								$.ajax({
									url: '${pageContext.request.contextPath}/despesa/estornar/' + item.id,
									type: 'DELETE',
									success: function() {
										carregaDespesas();
									}
								});
							}
						})
						.appendTo($('<td>').appendTo('tr:last')));
					try {
						$('<td>').append(new Date(item.data.$).format('dd/mm/yyyy')).appendTo('tr:last');
					} catch (error) {
						$('<td>').append(item.data.$).appendTo('tr:last');
					}
					
				
					$('<td>').append(item.servico.descricao).appendTo('tr:last');
					$('<td>').append(item.quantidade).addClass('numero').appendTo('tr:last');
					$('<td>').append(item.servico.valor).addClass('dinheiro').appendTo('tr:last');
					$('<td>').append(totalDespesa.toFixed(2)).addClass('dinheiro').appendTo('tr:last');
				});
				
				$('#despesas > tbody').append('<tr>');
				$('<td colspan="5">Total:</td>').addClass('rodapeTotal').appendTo('tr:last');
				$('<td>').addClass('rodapeTotal dinheiro').append(total.toFixed(2)).appendTo('tr:last');
				$('<div>').addClass('simboloMoeda').html('R$').appendTo($('.dinheiro'));
			},
			error: function () {
				if (trSemApartamento) {
					$('#despesas > tbody > tr').remove();
					$('#despesas > tbody').append(trSemApartamento);
				}
			}
		});
	}
	
	$('#apartamento').change(carregaDespesas);
	$('#apartamento option[value=${despesa.reserva.apartamento.numero}]').attr('selected', 'selected');
	$('#servico option[value=${despesa.servico.id}]').attr('selected', 'selected');
	carregaDespesas();
});
</script>